<template>
    <div id="container">
        <el-card id="result-item-card">
            <el-row :gutter="20">
                <el-col :span="20">
                    <div class="title">
                        <span id="type-icon" :class="item.type"></span>
                        <span id="title-text">{{item.name}}</span>
                    </div>
                </el-col>
                <el-col :span="4">
                    <span id="score">{{item.score}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div id="tags">
                        <el-tag type="primary" id="course-tag">适用的课程：{{item.course}}</el-tag>
                        <el-tag type="primary" id="course-tag">适用的软件工程阶段：{{item.stage}}</el-tag>
                        <el-tag type="success" v-for="(value,index) in item.tags" :key="index">{{value}}</el-tag>
                    </div>
                </el-col>
            </el-row>
             <el-row :gutter="20">
                <el-col :span="6">
                    <div id="download-count">
                        下载次数：{{item.download_count}}
                    </div>
                </el-col>
                <el-col :span="14">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <!-- <el-breadcrumb-item v-for="(item,index) in item.location" :key="index">{{item}}</el-breadcrumb-item> -->
                    </el-breadcrumb>
                </el-col>
                <el-col :span="4">
                    <el-link type="primary" @click="handleViewDetail(item.id)">查看详情/下载 >></el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    name:'ResultItem',
    props:['item'],
    data:function(){
        return{
        }
    },
    methods:{
        handleViewDetail:function(id){
            this.$router.push('/detail?id='+id);
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/file.css";
#container{
    padding:20px;
    padding-left:50px;
    padding-right:50px;
    box-sizing: border-box;
    background-color: #fff;
    #result-item-card{
        padding:10px;
        #type-icon{
            // background-image: url("~@/assets/icons/photo.png");
            display: inline-block;
            width:40px;
            height: 40px;
            background-size:40px 40px;
            background-repeat:no-repeat;
            background-position:top center;
            background-color: transparent;
        }
        #title-text{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            vertical-align: bottom;
            font-size: 18px;
            font-weight: bold;
            margin-left:10px;
            overflow: hidden; 
            text-overflow: ellipsis;
            width:80%;
        }
        #score{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            vertical-align: bottom;
            font-size: 22px;
            font-weight: bold;
            color:#FFCC00;
            font-style: oblique;
        }
        #tags,#download-count{
            padding-top:5px;
            padding-left:55px;
        }
        #download-count{
            display: inline-block;
            padding-top: 15px;
            font-size:12px;
            color: gray;
        }
    }
}
.el-tag{
    margin-right: 10px;
    line-height: 18px;
    height: 18px;
}
.el-breadcrumb{
    margin-top:15px;
    font-size:12px;
    color: gray;
}
.el-link{
    margin-top:10px;
}
</style>